<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!-- /.panel -->
<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-bar-chart-o fa-fw"></i> Website Analytics
        <div class="pull-right">
            <!-- Build your select: -->
            <div style="margin-top:-10px">
                <i class="fa fa-calendar fa-2x" aria-hidden="true"></i>
                <select class="multiselect">
                    <option value="1">最近一周</option>
                    <option value="2">最近两周</option>
                    <option value="3">最近三周</option>
                    <option value="4">最近四周</option>
                </select>
            </div>
        </div>
    </div>
    <!-- /.panel-heading -->
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-8">
                <div id="website_analytics" style="width: 800px;height:350px;"></div>
            </div>
            <!-- /.col-lg-12 (nested) -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.panel-body -->
</div>
<script src="/javascripts/echarts-all-3.js"></script>
<script type="text/javascript">
    //初始化最近7天时间数组
    function init_last7days_array() {
        var last7days_array = [];
        for (var i = 7; i > 0; i--) {
            var preDate_last7day = new Date(new Date().getTime() - i * 24 * 60 *
                60 * 1000);
            var preDate_last7day_str = preDate_last7day.getFullYear().toString() +
                "-" +
                (preDate_last7day.getMonth() + 1) + "-" + preDate_last7day.getDate();
            last7days_array.push(preDate_last7day_str)
        }
        return last7days_array;
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart_website_analytics = echarts.init(document.getElementById('website_analytics'));

    // 指定图表的配置项和数据
    option_website_analytics = {
        title: {
            text: '', //Website Analytics(Last 7 Days)',
            subtext: '(点击折点查看详情)',
            left: 'center',
            subtextStyle: {
                color: 'red',
                fontWeight: 'bold'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['PV', 'UV']
        },
        toolbox: {
            show: true,
            feature: {
                // dataZoom: {
                //     yAxisIndex: 'none'
                // },
                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ['line', 'bar']
                },
                // restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: init_last7days_array()
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [{
            name: 'PV',
            type: 'line',
            data: [1100, 1100, 1500, 1300, 1200, 1300, 1000],
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最大值'
                }, {
                    type: 'min',
                    name: '最小值'
                }]
            },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值'
                }]
            },
            itemStyle: {
                normal: {
                    color: 'rgb(0,172,172)'
                }
            },
        }, {
            name: 'UV',
            type: 'line',
            data: [100, 200, 200, 500, 300, 200, 100],
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最大值'
                }, {
                    type: 'min',
                    name: '最小值'
                }]
            },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值'
                }]
            },
            itemStyle: {
                normal: {
                    color: 'rgb(52,143,226)'
                }
            },
        }]
    };

    myChart_website_analytics.setOption(option_website_analytics);

    myChart_website_analytics.on('click', function (params) {
        //提取状态码数字
        // var status = params.name.match(/\d+(\.\d+)?/g);
        window.open(window.location.origin + "/" + params.seriesName + "?date=" + params.name);
        // alert(params.seriesName + params.value)
    });
</script>